/*
 * @Author: Eco.dujun 
 * @Date: 2018-09-04 09:36:13 
 * @Last Modified by: Eco.dujun
 * @Last Modified time: 2018-09-06 16:29:16
 */
<template>
    <div class="margin-right">
        <!-- type===0 输入框 -->
        <div v-if="searchData.type===0">
            <span>{{searchData.searchPlaceholder + ": "}}</span>
            <el-input size="small" class="tems_Input inputWidth" placeholder="请输入..." v-model="itemData"
                    @input="$emit('change', itemData)" clearable/>
        </div>
        <!-- type===1 通用下拉框不带url参数默认传入下拉数据 -->
        <div v-if="searchData.type===1">
            <span>{{searchData.searchPlaceholder + ": "}}</span>
            <el-select size="small" class="tems_Input inputWidth" @input="$emit('change', itemData)" clearable filterable
                    v-model="itemData"
                    placeholder="请选择...">
                <el-option class="" v-for="(item, index) in selectData" :key="index" :value="item.id" :label="item.name">
                    {{ item.name}}
                </el-option>
            </el-select>
        </div>
        <!-- type===2 通用下拉框带url参数接口获取下拉数据 -->
        <div v-if="searchData.type===2">
            <span>{{searchData.searchPlaceholder + ": "}}</span>
            <el-select size="small" class="tems_Input inputWidth" @input="$emit('change', itemData)" clearable filterable
                    v-model="itemData"
                    placeholder="请选择...">
                <el-option class="" v-for="(item, index) in selectUrlData" :key="index" :value="item.id" :label="item.name">
                    {{ item.name}}
                </el-option>
            </el-select>
        </div>
        <!-- type===3，4 时间筛选通用下拉 -->
        <div v-if="searchData.type===3">
            <span>{{searchData.searchPlaceholder + ": "}}</span>
            <el-date-picker class="tems_Input inputWidth" v-model="itemData" size="small" @input="$emit('change', itemData)" placeholder="选择开始日期时间" />
        </div>
        <div v-if="searchData.type===4">
            <span>{{searchData.searchPlaceholder}}</span>
            <el-date-picker class="tems_Input inputWidth" v-model="itemData" size="small" @input="$emit('change', itemData)" placeholder="选择结束日期时间" />
        </div>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "search-modal",
        props: ["value", "searchData", "typeIndex"],
        model: {
            event: "change"
        },
        data() {
            return {
                visibleItem: true,
                selectUrlData: [], // 通用下拉框数据带url参数
                selectData: [], // 通用下拉框数据不带url参数需要默认传入下拉数据
                itemData: "" // v-model值绑定
            };
        },
        watch: {
            "typeIndex": function(val, old) {
                this.itemData = "";
            },
            "searchData": {
                // 检测到传入的值改变重新获取下拉数据
                handler: function(val, oldVal) {
                    this.itemData = "";
                    if (val.url) {
                        this.getTableData();
                    } else if (!val.url && val.type !== 0) {
                        this.selectData = val.data;
                    }
                    if (val.time) {
                        this.itemData = val.time;
                        this.$emit("change", this.itemData);
                    }
                }
            }
        },
        methods: {
            getTableData() {
                axios.get(this.searchData.url).then((res) => {
                    this.selectUrlData = res;
                }).catch(this.defaultHttpHandler);
            }
        },
        mounted() {
            if (this.searchData.url) {
                axios.get(this.searchData.url).then((res) => {
                    this.selectUrlData = res;
                });
            } else if (!this.searchData.url && this.searchData.type !== 0) {
                this.selectData = this.searchData.data;
            }
            if (this.searchData.time) {
                this.itemData = this.searchData.time;
                this.$emit("change", this.itemData);
            }
        }
    };
</script>

<style scoped>
    .inputWidth {
        width: 7vw!important;
        min-width: 110px!important;
        max-width: 130px!important;
    }
    .tems_Input /deep/ {
        margin-left: 5px;
        margin-right: 5px;
    }
    .el-input__inner {
        height: 34px;
    }
</style>